<template>
  <div class="trainingEdit" :style="{ 'minHeight': $store.oj.systemParams.screenHeight * 0.80 + 'px' }">
    <div class="t-header" v-if="this.$route.name !== 'trainingCreate'">
      <div class="t-h-title"> <i class="iconfont icon-bianji"></i>编辑训练</div>
    </div>
    <div class="t-header" v-else>
      <div class="t-h-title"> <i class="iconfont icon-zengjia"></i>创建训练</div>
    </div>
    <div class="row ranking">
      <div class="title">训练排序编号</div>
      <n-input-number :min="1" :max="10000" class="inputNumber" placeholder="编号(升序)"
        v-model:value="trainingDetail.training.ranking"></n-input-number>
    </div>
    <div class="row2">
      <div class="title">训练标题</div>
      <n-input class="inputTitle" placeholder="标题" :status="status.titleStatus"
        v-model:value="trainingDetail.training.title" @blur="changeStatus"></n-input>
    </div>
    <div class="row2">
      <div class="title">训练描述</div>
      <v-md-editor class="mdEdit" height="300px" :left-toolbar="toolbar"
        v-model="trainingDetail.training.description"></v-md-editor>
    </div>
    <div class="row3">
      <div class="title">训练权限</div>
      <n-select class="r-select" placeholder="训练权限" v-model:value="trainingDetail.training.auth"
        :options="authOptions"></n-select>
    </div>
    <transition>
      <div class="row3" v-show="trainingDetail.training.auth === 1">
        <div class="title">训练密码</div>
        <n-input class="r-input" type="password" placeholder="训练密码" :status="status.pwdStatus"
          v-model:value="trainingDetail.training.privatePwd" @blur="changeStatus"></n-input>
      </div>
    </transition>
    <div class="row3">
      <div class="title">训练分类</div>
      <n-select class="r-select" placeholder="训练分类" filterable v-model:value="trainingDetail.trainingCategory.id"
        :options="categoryList" label-field="name" value-field="id"></n-select>
    </div>

    <div class="row4">
      <n-button class="r-btn" round type="success" @click="updateTraining()"
        v-if="this.$route.name !== 'trainingcreate'">保存</n-button>
      <n-button class="r-btn" round type="success" @click="saveTraining()" v-else>保存</n-button>
    </div>

  </div>
</template>

<script>
import { getTrainingDetailAPI, getCategoryAPI, updateTrainingAPI, saveTrainingAPI } from "@/api/adminAPI/adminAPI"
import { ElMessage } from 'element-plus'

export default {
  data () {
    return {
      trainingDetail: {
        training: {
          title: '',
          description: '',
          ranking: null,
          auth: null,
          privatePwd: ''
        },
        trainingCategory: {
          id: null
        }
      },
      toolbar: "undo redo clear | h bold italic strikethrough quote | ul ol table hr | link tip code  | emoji",
      authOptions: [
        {
          label: '公共训练',
          value: 0
        },
        {
          label: '私有训练',
          value: 1
        },
        {
          label: '保护训练',
          value: 2
        }
      ],
      categoryList: [],
      status: {
        titleStatus: '',
        pwdStatus: ''
      }
    }
  },
  mounted () {
    if (this.$route.name !== "trainingcreate") {
      this.getTrainingDetail()
    }
    this.getCategoryList()
  },
  methods: {
    //获取训练详情
    async getTrainingDetail () {
      await getTrainingDetailAPI(this.$route.params.tid).then(res => {
        if (res.data.code === 200) {
          this.trainingDetail = res.data.data
        }
      }).catch(err => {
        console.log("系统错误")
      })
    },
    //获取训练分类
    async getCategoryList () {
      await getCategoryAPI().then(res => {
        if (res.data.code === 200) {
          this.categoryList = res.data.data
        }
      }).catch(err => {
        console.log("系统错误")
      })
    },
    formatData () {
      if (!(this.trainingDetail.training.ranking >= 1)) {
        ElMessage.error("请设置训练序号")
        return false
      }
      if (this.trainingDetail.training.title.length == 0) {
        ElMessage.error("请输入标题")
        this.status.titleStatus = 'error'
        return false
      }
      if (this.trainingDetail.training.description.length == 0) {
        ElMessage.error("请输入训练描述")
        return false
      }
      if (this.trainingDetail.training.auth != 0 && this.trainingDetail.training.auth != 1 && this.trainingDetail.training.auth != 2) {
        ElMessage.error("请设置训练权限")
        return false
      }
      if (this.trainingDetail.trainingCategory.id == null) {
        ElMessage.error("请设置训练分类")
        return false
      }
      if (this.trainingDetail.training.privatePwd.length == 0 && this.trainingDetail.training.auth == 1) {
        ElMessage.error("请设置训练密码")
        this.status.pwdStatus = 'error'
        return false
      }

      return true
    },
    //更新训练
    async updateTraining () {
      if (!this.formatData()) {
        return
      }
      await updateTrainingAPI(this.trainingDetail).then(res => {
        if (res.data.code === 200) {
          ElMessage.success("更新成功")
          this.$router.go(-1)
        }
      }).catch(err => {
        console.log("系统错误")
      })
    },
    //失焦改变输入框颜色
    changeStatus () {
      if (this.trainingDetail.training.title.length > 0) {
        this.status.titleStatus = ''
      }
      if (this.trainingDetail.training.privatePwd.length > 0) {
        this.status.pwdStatus = ''
      }
    },
    //新增训练
    async saveTraining () {
      if (!this.formatData()) {
        return
      }
      await saveTrainingAPI(this.trainingDetail).then(res => {
        if (res.data.code === 200) {
          if (this.trainingDetail.training.auth == 2) {
            ElMessage.warning("请设置保护训练用户")
          } else {
            ElMessage.success(res.data.msg)
          }
          this.$router.push({
            path: "/admin/training/list"
          })
          this.trainingDetail = {
            training: {
              title: '',
              description: '',
              ranking: null,
              auth: null,
              privatePwd: ''
            },
            trainingCategory: {
              id: null
            }
          }
        }
      }).catch(err => {
        console.log("系统错误")
      })
    },

  }
}
</script>

<style lang="less" scoped>
.trainingEdit {
  margin: auto;
  width: 96%;
  padding: 15px 10px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 12px 12px 50px #d9d9d9,
    -12px -12px 50px #ffffff;

  .t-header {
    display: flex;
    padding-bottom: 10px;
    border-bottom: 2px solid @lineColor;

    .t-h-title {
      height: 30px;
      line-height: 30px;
      font-size: 20px;
      font-weight: 600;
      color: #555;
      display: flex;
      text-align: center;

      .iconfont {
        margin: auto 0;
        font-weight: 700;
        font-size: 28px;
        height: 30px;
      }
    }
  }

  .title {
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    width: 10%;
    font-weight: 550;
    color: #5e5e5e;
  }

  .row {
    display: flex;
    margin: 10px 0;
    height: 40px;

    .inputNumber {
      width: 12%;
      margin: auto 20px;
    }
  }

  .row2 {
    margin: 10px 0;

    .inputTitle {
      margin: auto auto;
      width: 99%;
    }


  }

  .row3 {
    display: flex;
    margin: 10px 0;

    .title {
      font-size: 16px;
      height: 40px;
      line-height: 40px;
      width: 6%;
      font-weight: 550;
      color: #5e5e5e;
    }

    .r-select {
      width: 12%;
      margin: auto 30px;
    }

    .upload-demo {
      margin: auto 30px;
      width: 60%;
    }

    .r-input {
      width: 20%;
      margin: auto 30px;
    }
  }

  .row4 {
    display: flex;
    justify-content: center;
    margin: 30px auto 0 auto;

    .r-btn {
      width: 10%;
    }
  }
}

.v-enter-active,
.v-leave-active {
  transition: opacity 0.3s ease-in-out;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>